<template>
  <div class="m-8 mr-0 bg-white">
    <!-- 具名插槽 -->
    <BasicTree title="机场列表" :style="getHeight" search :treeData="treeData" :fieldNames="{ key: 'airportId', title: 'airportName' }" @select="handleSelect" />
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';

import { BasicTree, TreeItem } from '@apps/antd-admin/src/components/tree';
import { airportList } from '@apps/ant-bus/src/views/business/airport/data/api';

const emit = defineEmits(['register', 'select']);
const treeData = ref<TreeItem[]>([]);

const getHeight = computed(() => {
  const clientHeight = window.document.documentElement.clientHeight;
  return {
    height: clientHeight - 200 + 'px',
  };
});
async function fetch() {
  treeData.value = ((await airportList({})) as unknown) as TreeItem[];
}

function handleSelect(keys) {
  console.info(keys);
  emit('select', keys[0]);
}

onMounted(() => {
  fetch();
});
</script>
